<template>
    <!--    搜索条件框-->
    <div class="cardContent">
        <a-form
                ref="formRef"
                layout="inline"
                :model="searchData">
            <a-form-item label="关键词">
                <a-input v-model:value="searchData.keyword" placeholder="请输入关键词"></a-input>
            </a-form-item>
            <a-form-item label="状态">
                <a-select v-model:value="searchData.status" placeholder="请选择状态">
                    <a-select-option :value="null">全部</a-select-option>
                    <a-select-option :value="0">未发放</a-select-option>
                    <a-select-option :value="1">已结算</a-select-option>
                </a-select>
            </a-form-item>
            <a-space>
                <a-button type="primary" @click="load(1)">搜索</a-button>
                <a-button type="default" @click="reset">重置</a-button>
            </a-space>
        </a-form>
    </div>
    <!--    列表展示-->
    <div class="cardContent">
        <a-table :dataSource="salaryList"
                 style="margin-top: 10px"
                 :columns="columns"
                 :pagination="false"
                 size="small"
                 bordered>
            <template #bodyCell="{text,record,index,column}">
                <template v-if="column.key == 'status'">
                    {{text == 0 ? '未发放' : '已结算'}}
                </template>
                <template v-if="column.key == 'salaryDate'">
                    {{formatDate(text)}}
                </template>
                <a-space v-if="column.key == 'action'">
                    <a-button type="primary" @click="openModal(record)">详情</a-button>
                    <a-popconfirm
                            title="是否确认删除?"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button type="danger">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
        <a-config-provider :locale="locale">
            <a-pagination style="margin-top: 10px; text-align: right"
                          v-model:current="pagination.current"
                          v-model:pageSize="pagination.pageSize"
                          show-quick-jumper
                          show-size-changer
                          :total="pagination.total"
                          :show-total="total => `总 ${total} 条数据`"
                          :page-size-options="pageSizeOptions"
                          @change="onChange"/>
        </a-config-provider>
    </div>
    <a-drawer
            v-model:visible="visible"
            width="800"
            title="薪资详情"
            placement="right"
            @afterVisibleChange="afterVisibleChange"
            :footer-style="{textAlign: 'right'}"
    >
        <a-form :model="salary" layout="vertical">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="薪资时间">
                        <a-input v-model:value="salary.salaryDate" disabled/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="状态">
                        <a-tag v-if="salary.status == 0" color="default">
                            <template #icon>
                                <clock-circle-outlined/>
                            </template>
                            未发放
                        </a-tag>
                        <a-tag v-else color="success">
                            <template #icon>
                                <check-circle-outlined/>
                            </template>
                            已结算
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-form-item label="用户名">
                        <a-input v-model:value="salary.username" disabled/>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="角色">
                        <a-input v-model:value="salary.roleName" disabled/>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="总薪资">
                        <a-input-number addon-after="￥" v-model:value="salary.sumSalary" disabled/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="14">
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-item label="基本工资">
                                <a-input-number addon-after="￥" v-model:value="salary.baseAmount" disabled/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="报销金额">
                                <a-input-number addon-after="￥" v-model:value="salary.reimbursementAmount" disabled/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-item label="请假扣除金额">
                                <a-input-number addon-after="￥" v-model:value="salary.leaveAmount" disabled/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="研发分红">
                                <a-input-number addon-after="￥" v-model:value="salary.rdAmount" disabled/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-item label="销售提成">
                                <a-input-number addon-after="￥" v-model:value="salary.salesAmount" disabled/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="奖金">
                                <a-input-number addon-after="￥" v-model:value="salary.bonus" :disabled="salary.status == 1"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-item label="罚款">
                                <a-input-number addon-after="￥" v-model:value="salary.penalty" :disabled="salary.status == 1"/>
                            </a-form-item>
                        </a-col>s
                    </a-row>
                </a-col>
                <a-col :span="10">
                    <div id="salaryInfo" style="width: 300px;height: 400px"></div>
                </a-col>
            </a-row>
        </a-form>
        <template #footer>
            <a-space>
                <a-button type="default" @click="visible = false">取消</a-button>
                <a-button type="primary" v-if="salary.status == 0" @click="saveOrUpdate">保存</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>

<script>
    import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
    import {onBeforeUnmount, onMounted, ref, shallowRef} from "vue";
    import axios from "axios";
    import {message} from "ant-design-vue";
    import dayjs from 'dayjs'
    import {SyncOutlined, ClockCircleOutlined, CheckCircleOutlined} from '@ant-design/icons-vue'
    import * as echarts from 'echarts';

    export default {
        name: "salary",
        components: {
            SyncOutlined,
            ClockCircleOutlined,
            CheckCircleOutlined
        },
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                },
                {
                    title: '薪资时间',
                    dataIndex: 'salaryDate',
                    key: 'salaryDate',
                },
                {
                    title: '用户名',
                    dataIndex: 'username',
                    key: 'username',
                },
                {
                    title: '角色名',
                    dataIndex: 'roleName',
                    key: 'roleName',
                },
                {
                    title: '总薪资',
                    dataIndex: 'sumSalary',
                    key: 'sumSalary',
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: '200px'
                }
            ]
            const locale = zhCN
            const salary = ref({})
            const salaryList = ref()
            const searchData = ref({})
            const pagination = ref({
                current: 1,
                pageSize: 5,
            })
            const pageSizeOptions = ref(['5', '10', '20', '30', '50', '100'])
            const visible = ref(false);

            const saveOrUpdate = () => {
                axios.post('/salary/saveOrUpdate', salary.value).then(rs => {
                    console.log("新增或修改结果：", rs)
                    if (rs.code == 200) {
                        visible.value = false
                        message.success("操作成功")
                        load()
                    } else {
                        message.error(rs.message)
                    }
                })
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/salary/deleteById/' + id).then(rs => {
                    if (rs.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.message)
                    }
                })
            }

            const openModal = (obj) => {
                console.log("模态框参数：", obj)
                salary.value = JSON.parse(JSON.stringify(obj))
                visible.value = true;
            }

            const load = (pageNum) => {
                pagination.value.current = pageNum == 1 ? 1 : pagination.value.current
                axios.get('/salary/queryByCondition', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        keyword: searchData.value.keyword,
                        status: searchData.value.status
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    salaryList.value = rs.data.records
                    pagination.value.total = rs.data.total
                })
            }

            const onChange = (pageNum, pageSize) => {
                pagination.value.current = pageNum
                pagination.value.pageSize = pageSize
                load()
            }

            const reset = () => {
                searchData.value = {}
                load()
            }

            const formatDate = (time) => {
                return dayjs(time).format('YYYY-MM')
            }

            const afterVisibleChange = (visible) => {
                // console.log("aaaa",visible)
                if (visible) {
                    // 基于准备好的dom，初始化echarts实例
                    const myChart = echarts.init(document.getElementById('salaryInfo'));
                    const option = {
                        title: {
                            text: '薪资明细',
                            subtext: salary.value.username,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [
                            {
                                name: '金额',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    {value: salary.value.baseAmount, name: '基本工资'},
                                    {value: salary.value.reimbursementAmount, name: '报销金额'},
                                    {value: salary.value.leaveAmount, name: '请假扣除金额'},
                                    {value: salary.value.rdAmount, name: '研发分红'},
                                    {value: salary.value.salesAmount, name: '销售提成'},
                                    {value: salary.value.bonus, name: '奖金'},
                                    {value: salary.value.penalty, name: '罚款'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 绘制图表
                    myChart.setOption(option);
                }
            }

            onMounted(() => {
                load()
            })
            return {
                columns,
                salary,
                salaryList,
                pagination,
                pageSizeOptions,
                onChange,
                load,
                locale,
                searchData,
                reset,
                visible,
                openModal,
                saveOrUpdate,
                okDelete,
                formatDate,
                afterVisibleChange
            }
        }
    }
</script>

<style scoped>
    .cardContent {
        background: #fff;
        margin: 10px 10px 0 10px;
        padding: 15px;
    }
</style>